import React,{Component} from 'react'

import {
    View,
    Text,
    ToastAndroid,
    FlatList,
    StyleSheet,
    ScrollView,
    TouchableNativeFeedback
}from 'react-native'


const styles=StyleSheet.create({
    warp:{
        width:'100%',
    },
    addtop:{
        width:'100%',
        height:50,
        backgroundColor:'rgb(255,97,3)',
        borderRadius:10,
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center'
    },
    content:{
        width:'100%',

    },
    list:{
        width:'100%',
        height:50,
        flexDirection:'row',
        backgroundColor:'white',
        justifyContent:'space-around',
        alignItems:'center'
    },
    listleft:{
        width:'80%',
        height:'100%',
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center'
    },
    jiange:{
        width:'100%',
        borderTopWidth:1,
        borderColor:'rgba(150,150,150,0.2)',
        height:1
    },
    listright:{
        width:'20%',
        height:'100%',
        borderLeftWidth:1,
        borderColor:'rgba(150,150,150,0.2)',
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center'
    }
})


export default class FoodGuige extends Component{
    static navigationOptions={
        title:'规格管理',
        headerTitleStyle: {
        alignSelf:'center'
      },
    };

    state={
        datesource:[1,2,3]
    }

    delete1=async function(data,index){
        try {
            let response = await fetch(global.mainurl+"bossHelper/deleteFoodSpecs?id="+data+"&userid="+global.userdata.id+"&token="+global.token);
            var data=await response.json()
            console.log(data)
            if(data.code==1){
                var data=this.state.datesource
                data.splice(index,1)
                        this.setState({
                            datesource:data
                        })
                         ToastAndroid.show('操作成功', ToastAndroid.SHORT);
                    }
            else{
					ToastAndroid.show('操作失败', ToastAndroid.SHORT);			
						}
            } 
    catch(error) {
      console.log(error)
            ToastAndroid.show('网络出错', ToastAndroid.SHORT);
            }
    }

    async componentWillMount(){
        try {

            let response = await fetch(global.mainurl+"bossHelper/getFoodSpecs?sellerid="+global.sellerid+"&userid="+global.userdata.id+"&token="+global.token);
            var data=await response.json()
            console.log(data)
            if(data.code==1){
                        this.setState({
                            datesource:data.data
                        })
                    }
            else{
								
						}
            } 
    catch(error) {
      console.log(error)
            ToastAndroid.show('网络出错', ToastAndroid.SHORT);
            }
    }

    render(){
        return(
            <View style={styles.warp}>
            <TouchableNativeFeedback
            onPress={()=>{this.props.navigation.navigate("FoodGuigeAdd")}}
            >
            <View style={styles.addtop}>
            <Text style={{color:'white'}}>
            添加规格
            </Text>
            </View>
            </TouchableNativeFeedback>

            <FlatList
                style={styles.content}
                keyExtractor={(item, index) => index}
                ItemSeparatorComponent={()=>{
                return(
                    <View style={styles.jiange}/>
                    )
                
                }}
                data={this.state.datesource}
                renderItem={
                    (item)=>{
                        return(
                            <View style={styles.list}>
                            <TouchableNativeFeedback
                            onPress={()=>{
                                this.props.navigation.navigate("FoodGuigeAdd",{
                                    id:item.item.id,
                                    name:item.item.name,
                                    sort:item.item.sortValue
                                })
                            }}
                            >
                            <View style={styles.listleft}>
                            <Text>
                            {item.item.name}
                            </Text>
                            </View>
                            </TouchableNativeFeedback>
                            
                            <TouchableNativeFeedback
                            onPress={()=>{
                                this.delete1(item.item.id,item.index)
                            }}
                            >
                            <View style={styles.listright}>
                            <Text>
                            删除
                            </Text>
                            </View>
                            </TouchableNativeFeedback>

                            </View>
                        )
                    }
                }
            />

            </View>
        )
    }
}


